react、react-router、redux 也许是最佳小实践1-白红宇

react、react-router、redux 也许是最佳小实践1

阅读量：5866 次

发布时间：2019-06-19

本文共 9002 字，大约阅读时间需要 30 分钟。

小前言

这是一个小小的有关react的小例子，希望通过一个小例子，可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。

这是基于来开发的，一种简单的快速创建 React web 项目的方式是使用 Create React App 工具，相当于一个react手脚架，此工具由 Facebook 开发并维护。如果你还没有使用过 create-react-app，你需要先安装。然后就可以通过它创建一个新项目。

号称一次学习，随处路由。通过声明式编程模型定义组件，是 React 最强大的核心功能。 React Router 可以为您的应用已声明式的方式定义导航组件最强大的核心功能。无论是 Web App 的浏览器书签 URLs，还是 React Native 的导航功能，只要是可以使用 React 的地方，就可以使用 React Router。

是一个用来管理JavaScript应用中 data-state(数据状态)和UI-state(UI状态)的工具，对于那些随着时间推移状态管理变得越来越复杂的单页面应用（SPAs）它是比较理想。

下面我们看看完成后的小 demo

react-plan

开始用`create-react-app`创建我们的 app

首先安装好create-react-app，已经安装好了就不用重复安装啦。

npm install -g create-react-app

mac不成功记得用 sudo

安装完毕之后:

create-react-app react-plan cd react-plan/npm start

安装会有点慢，耐心等待一下

安装完毕之后，在浏览器地址栏输入localhost:3000，就可以浏览到刚才创建的 app 啦，这个手脚架很简单。如下图

react-plan

代码开始

创建好应用之后，我们就开始写我们的代码了，在 src文件夹下面创建一个components文件夹，并且在这个文件夹下面创建一个home.js的文件,然后写上我们首页的内容。

react-plan

首页介绍组件

src/components/home.js

import React, { Component } from 'react'class Home extends Component {    constructor(props) {        super(props);    }    render () {        return (            
                    
     首页
                
     这是一个 react 学习的基本操作的小栗子
                
     通过本次学习可以清楚的掌握， react-router、redux的基本使用方法
                
     
                
     
                
     
            
    
        )    }}export default Home

写好了 home.js 之后我们先引入我们的 app 看看

然后在src/App.js引入我们的 home.js，App.js就变成了

src/App.js

import React, { Component } from 'react';import logo from './logo.svg';// 引入 homejsimport Home from './components/home.js'import './App.css';class App extends Component {  render() {    return (      
            
               
                
      Welcome to React
        
     
        
               To get started, edit src/App.js and save to reload.        
        // 使用 home 组件        
           
    
    );  }}export default App;

写好之后我们就可以成功的写完了home.js组件啦，是不是很简单，是不是很happy？

react-plan

一鼓作气，完成所有组件

继续在components文件夹创建一个plan.js(计划表)、detail.js(计划详情)、pupop.js(添加计划)、的js文件和comment.css(组件的样式),我们这时候不涉路由的跳转，只要把所有静态的组件先一鼓作气写好来。

tips：这个例子小，为了方便，我把所有的组件样式文件都写到comment.css里面了，这时候写好的了 css 记得在App.js里面引入

src/App.js增加一句 import './components/comment.css'

src/components/comment.css

.main {  padding: 10px;  flex-direction: row;  display: flex;}.NavBox {    width: 250px;    margin-right: 20px;}.listNav{    text-align: center;}.listNav li {    line-height: 40px;}.listNav li a {    text-decoration: none;}.listNav li.active{    background: #00a6f7;}.listNav li.active a{    color: #fff;}.side{    width: 100%;}.slist{    font-size: 14px;}.addBtn {    font-size: 14px;    font-weight: normal;    background: skyblue;    display: inline-block;    padding: 10px;    margin-left:  10px;    color: #ffffff;    border-radius: 4px;    cursor: pointer;}.slist li{    padding: 10px;    display: flex;    flex-direction: row;    justify-content: space-between;    border-bottom: solid 1px cornflowerblue;}.slist li h3{    font-weight: normal;}.slist li div span{    text-decoration: underline;    padding: 0 10px;}.popup{    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: rgba(0, 0, 0, 0.6);    display: flex !important;    justify-content: center;    align-items: center;}.popup .pbox {    width: 50%;    height: 320px;    background: #ffffff;    box-sizing: border-box;    padding: 10px;    position: relative;}.popup .pbox h4{    font-size: 14px;}.popup .pbox input {    margin: 10px 0 20px 0;}.popup .pbox input, .popup .pbox textarea{    display: block;    width: 100%;    height: 32px;    border: 1px solid skyblue;    text-indent: 10px;}.popup .pbox textarea {    resize: none;    height: 100px;    margin: 10px 0;}.popup .pbox .close {    position: absolute;    width: 30px;    height: 30px;    background: red;    text-align: center;    line-height: 30px;    border-radius: 50%;    color: #ffffff;    right: -15px;    top: -15px;    transition: 0.5s;    cursor: pointer;}.popup .pbox .close:hover{    transform: rotate(180deg);}.popup .pbox .pBtn {    display: flex;    justify-content: center;    padding-top: 20px;}.popup .pbox .pBtn span{    padding: 10px 20px;    background: skyblue;    margin: 0 10px;    font-size: 14px;    color: #ffffff;    border-radius: 4px;    cursor: pointer;}.plant{    line-height: 50px;    position: relative;}.plant p{    position: absolute;    right: 0;    top: 0;    font-size: 14px;    background: blue;    height: 30px;    line-height: 30px;    padding: 0 10px;    color: #fff;}.planlist{    width: 100%;    padding: 10px;    border-collapse: collapse;}.planlist td, th{    border: 1px solid blue;    line-height: 32px;    font-size: 14px;}.plan-delect{    color: red;    cursor: pointer;}.plan-delect:hover{    color: blue;    text-decoration: underline;}.plan-title{    width: 80%;}

计划组件

src/components/plan.js

import React, { Component } from 'react'class Plan extends Component {    constructor(props) {        super(props);    }    render () {        return (            
                    
                         
      计划表
                    
      添加计划
                
     
                
     
                                                                                             标题                                     操作                                
                          
                                                                                             计划1                                     删除                                
                          
                     
            
    
        )    }}export default Plan;

测试的时候直接把App.js刚才写的import Home from './components/home.js'改成 import Home from './components/plan.js',就可以测试plan 组件啦。是不是很简单？下面的同理。

计划详情组件

src/components/detail.js

import React, { Component } from 'react'class Detail extends Component {    constructor(props) {        super(props);    }    render() {        return (            
                    
     计划详情
                
     id： 123
                
     标题： 测试标题
                
     内容： 测试内容
            
    
        )    }}export default Detail

添加计划组件

src/components/popup.js

import React, { Component } from 'react'class Pupop extends Component{  constructor (props) {    super(props)    this.state = {      id: '',      title: '1',      content: '1'    }  }  render() {    let self = this;    return (      
            
               
      X          
                  
       计划标题
            
                 
      
          
                  
       计划内容
            
                 
      
          
                  
       取消            
       确认          
      
        
     
      
    
    )  }}export default Pupop

呼~~~终于把所有组件都写好了。下面我们就用路由把他们全都串联起来吧。实现点击跳转咯

加入路由

首先记得安装路由 npm install react-router-dom history --save

history这个模块是用来做 js 的跳转，后面我们会介绍到。

安装完成路由模块之后，在src/components/下面我们在增加一个测试二级路由的文件testrouter.js,里面的内容很简单，直接把官网的拿进来。

src/components/testrouter.js

import React, { Component } from 'react'import {  BrowserRouter as Router,  Route,  Link} from 'react-router-dom'const Topic = ({ match }) => (  
        
     {match.params.topicId}
  
    
)class TestRouter extends Component {    constructor(props) {        super(props);        console.log(this.props)    }    render () {        return (            
                
     二级路由
            
                   
                      
                         使用 React 渲染                              
              
                      
                         组件                              
              
                      
                         属性 v. 状态                              
            
     
            
                 
      
        (              
       请选择一个主题。
            )}/>          
      
     
    
        )    }}export default TestRouter

然后在App.js做一点改动，引入所有需要的模块，看注释

src/App.js

import React, { Component } from 'react'import {  BrowserRouter as Router,  Route,  Link} from 'react-router-dom'import logo from './logo.svg'// 引入4个模块组件import Plan from './components/plan.js'import Home from './components/home.js'import Popup from './components/popup.js'import TestRouter from './components/testrouter.js'import Detail from './components/detail.js'// 引入样式文件import './App.css'import './components/comment.css'// 引入路由import createHistory from 'history/createBrowserHistory'const history = createHistory()// 开始代码class App extends Component {  constructor(props) {    super(props);  }  render() {    return (      
              
                 
                  
      Welcome to React Plan
          
     
          
     
                  // 路由配置            
                     
       
                          // 编写导航                  
                            
         
          首页
                    
         
          计划表
                    
         
          二级路由
                  
        
                  // 路由匹配                  
                             
          
           
            
             
            
           
          
         
        
              
       
            
                
     
          
           
    
    );  }}export default App